<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

        }


        main {
            width: 1215px;
            height: 700px;
            background-color: aqua;
            display: flex;

        }


        .box {
            width: 850px;
            background-color: #999;
        }

        ul {
            width: 850px;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-around;
        }

        ul>li {
            width: 200px;
            height: 300px;
            background-color: rgb(177, 177, 153);
            text-align: center;
            font-size: 16px;
            border: 1px solid #000;

        }

        ul>li>img {
            width: 200px;
            height: 220px;
        }

        ul>li>h1 {
            font-size: 16px;
        }

        ul>li>button {
            width: 120px;
            height: 30px;
            background: red;
            line-height: 30px;
            margin-left: 10px;
        }

        ol>li {
            width: 350px;
            height: 100px;
            background-color: #999;
            display: flex;
            align-items: center;
        }

        #right {
            display: flex;
            flex-shrink: 0;
            flex-wrap: wrap;
        }

        .p1 {
            width: 50px;
            height: 30px;
            display: block;
            margin-top: 10px;
        }

        .name {
            width: 100px;
            height: 20px;
            margin-top: 20px;
        }

        #imgs {

            width: 50px;
            margin-left: 20px;
        }

        footer {

            overflow-x: hidden;
            overflow-y: scroll;

        }

        input {
            width: 20px;
            height: 20px;
        }

        .shan {
            width: 50px;
            height: 30px;
        }

        ol li img {
            height: 50px;

        }

        ol li {
            margin-bottom: 10px;

        }

        #guding {
            position: absolute;
            bottom: 0;
            display: flex;
        }

        .zong,
        .ge {
            width: 100px;
            height: 30px;
            background-color: aqua;
            border: 1px solid red;
        }

        .deleteMe {
            width: 50px;
            height: 30px;
            margin-left: 20px;
        }

        .check {
            margin-left: 40px;
        }

        .min {
            margin-left: 20px;
        }
    </style>

</head>

<body>
    <main>
        <div class="box">
            <ul>
                <!-- <li>
                    <img src="${item.pic}">
                    <span>${item.name}</span>
                    <h1>${item.price}</h1>
                    <button data-id="${item.id}">加入购物车</button>
                </li> -->
            </ul>
        </div>
        <footer>
            <h4>购物车 (<span class="two">0</span>)</h4>
            <ol>
                <!-- <li>
                    <input type='checkbox' class='check' ${item.is_checked ? 'checked' : '' } data-id='${item.id}'>
                    <div> <img id="imgs" src="${item.pic}" alt="">
                        <p id="name">${item.name</p>
                    </div>

                    <p class="p1">${parseInt(item.danjia) * item.num}</p>
                    <input type="button" value="-" class="min" data-id=${item.id}></input>
                    <input type="text" value="${item.num}" size="1">
                    <input type="button" value="+" class="max" data-id=${item.id}></input>
                    <input type="button" value="删除" class="deleteMe" data-id=${item.id}>
                </li> -->
            </ol>
            <h4>总价 ￥<span class="fixe">0</span>元</h4>
        </footer>

    </main>
</body>

</html>
<script src="./tool.js"></script>
<script src="./data.js"></script>
<script>

    var ul = document.querySelector("ul")
    var ol = document.querySelector("ol")
    var box = document.querySelector(".box")
    var footer = document.querySelector("footer")

    var jsonarr = [
        { id: 1001, "pic": "img/01.webp", "name": "高级办公椅", "price": "2999", "num": 1, },
        { id: 1002, "pic": "img/02.webp", "name": "高级办公椅", "price": "8999", "num": 1, },
        { id: 1003, "pic": "img/03.webp", "name": "高级办公椅", "price": "9999", "num": 1, },
        { id: 1004, "pic": "img/04.webp", "name": "高级办公椅", "price": "1999", "num": 1, },
        { id: 1005, "pic": "img/05.webp", "name": "高级办公椅", "price": "3999", "num": 1, },
        { id: 1006, "pic": "img/03.webp", "name": "高级办公椅", "price": "9999", "num": 1, },
        { id: 1007, "pic": "img/01.webp", "name": "高级办公椅", "price": "1999", "num": 1, },
        { id: 1008, "pic": "img/02.webp", "name": "高级办公椅", "price": "3999", "num": 1, },

    ]

    setData('cart', jsonarr)

    function render() {
        let data = getData('cart')
        var str = ''
        data.forEach(function (item, index) {
            str += `
            <li>
                <img src="${item.pic}">
                <span>${item.name}</span>
                <h1>${item.price}</h1>
                <button data-id=${item.id} class="btn">加入购物车</button>
            </li>`

        })
        ul.innerHTML = str
    }
    render()
    var show = []
    render()

    function render1() {
        var str = ''
        show.forEach(item => {
            str += `
            <li>
                <input type='checkbox' class='check' ${item.is_checked ? 'checked' : ''}  data-id='${item.id}'>
                  <div>  <img id="imgs" src="${item.pic}" alt="">
                    <p id="name">${item.name}</p>
                </div>
                 
                     <p class="p1">￥${parseInt(item.price) * item.num}</p>
                     <input type="button" value="-"  class="min"  data-id=${item.id} ></input>
                     <input type="text" value="${item.num}" size="1" class="num">
                     <input type="button" value="+" class="max"  data-id=${item.id} ></input>
                     <input type="button" value="删除" class="deleteMe" data-id=${item.id}>
                 </li> 
            `
        })
        ol.innerHTML = str
    }


    box.onclick = function (e) {
        if (e.target.nodeName == 'BUTTON') {
            let goods = jsonarr.find(item => item.id == e.target.dataset.id)
            if (show.indexOf(goods) != -1) {
                goods.num++
            } else {
                show.push(goods)
            }
            render1()
        }
        newarr()
        nerstr()
        footer.onclick = function (e) {
            if (e.target.className == 'min') {
                let goods = show.find(item => item.id == e.target.dataset.id)
                goods.num--
                if (goods.num <= 0) {
                    goods.num = 0
                }
                render()
                render1()
            }
            if (e.target.className == 'max') {
                let goods = show.find(item => item.id == e.target.dataset.id)
                goods.num++
                render()
                render1()
            }
            if (e.target.className == 'deleteMe') {
                let goods = show.splice((show.find(item => item.id == e.target.dataset.id)), 1)
                goods.num++
                render()
                render1()
            }
            newarr()
            nerstr()
        }
    }
    var two = document.querySelector(".two")
    var fixe = document.querySelector(".fixe")
    function newarr() {
        two.innerHTML = show.reduce(function (sum, item, index) {
            return sum += item.num;
        }, 0)
    }
    function nerstr() {
        fixe.innerHTML = show.reduce(function (sum, item, index) {
            return sum += item.num * item.price;
        }, 0)
    }



</script>